<template>
  <Content style="width: 462px;height:290px;">
    <!--    <span style="color:white;font-size:12px;margin-left: 10px;">销量/天数（自然日）：履约中位数：20天，平均天数35天</span>-->
    <div class="map" ref="echart"></div>
  </Content>
</template>
<script setup>
import {message} from "ant-design-vue";
import {goodsList} from "@/api/bigData/headAnalysis.js";
import {getBeforeMonthDate} from "@utils/utils.js";
import Content from "@/components/bigData/component/content.vue";
import {ref} from "vue";
import * as echarts from "echarts";
const echart = ref(null)
const monthList = ref([])
const list = ref([])
let myWater
const dataList = ref([])
const ataCount = ref([])
const shelvesAddedTimeCount = ref([])
const dayCount = ref([])
const yearWeekList = ref([])
const data = ref([])
const init = async () => {
  try{
    let time = getBeforeMonthDate(3)
    const res = await goodsList({
      site: 'US',
      beginDate: time[0],
      endDate: time[1]
    })
    dataList.value = res.result.records
    ataCount.value = []
    shelvesAddedTimeCount.value = []
    dayCount.value = []
    yearWeekList.value = Array.from(new Set(dataList.value.map(item => item.yearWeek)))
    let a = []
    for (let i = 0; i < yearWeekList.value.length; i++) {
      let arr = []
      for (let j = 0; j < dataList.value.length; j++) {
        if(dataList.value[j].yearWeek === yearWeekList.value[i]){
          arr.push(dataList.value[j])
        }
      }
      a.push(arr)
    }
    for (let i = 0; i < a.length; i++) {
      ataCount.value.push(a[i].reduce((pre, cur) => parseInt(pre) + parseInt(cur.ataCount), 0))
      shelvesAddedTimeCount.value.push(a[i].reduce((pre, cur) => parseInt(pre) + parseInt(cur.shelvesAddedTimeCount), 0))
      dayCount.value.push(Math.max(...a[i].map(item => item.dayCount)))
    }
    data.value = [ataCount.value, shelvesAddedTimeCount.value, dayCount.value]
    let option = {
      title: {
        text: '',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: [ '发货数', '上架数','航程天数'],
        textStyle: {
          color: '#FFFFFF'
        },
        top: '15px',
      },
      grid: {
        left: '6%',
        right: '6%',
        bottom: '3%',
        top: '30%',
        containLabel: true
      },
      xAxis:{
        boundaryGap: true,
        axisLine: {
          lineStyle: {
            color: '#FFFFFF'
          }
        },
        type: 'category',
        data: [],
      },
      yAxis: [
        {
          type: 'value',
          name: '柜子数目',
          min: 0,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF'
            }
          }
        },
        {
          type: 'value',
          name: '航程天数',
          min: 0,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF'
            }
          }
        }
      ],
      series: [
        {
          name: '发货数',
          type: 'line',
          data: []
        },
        {
          name: '上架数',
          type: 'line',
          data: []
        },
        {
          name: '航程天数',
          type: 'bar',
          data: [],
          barWidth: 50,
          yAxisIndex: 1,
        },
      ]
    };
    option.xAxis.data = yearWeekList.value
    option.title.text = name.value
    option.series[0].data = data.value[0]
    option.series[1].data = data.value[1]
    option.series[2].data = data.value[2]
    myWater.clear()
    //设置配置项
    myWater.setOption(option);
  }catch(err){
    message.error(err)
  }
}
onMounted(async () =>{
  myWater = echarts.init(echart.value);
  await init()
})
defineExpose(({
  init
}))
</script>
<style scoped>
body {
  color: white
}

.map {
  height: 100%;
  width: 100%;
}
</style>
